@model UserInfo
@{
    ViewData["Title"] = "个人设置";
}

<div class="container-fluid p-4">
    <div class="row">
        <div class="col-lg-5 mb-4 pe-lg-5">
            <div>
                <span class="h4">个人信息</span>
                <sl-button class="nr-btn-edit-info float-end" size="small">编辑</sl-button>
            </div>
            <sl-divider></sl-divider>
            <div>
                <div class="row">
                    <div class="col-auto">账号</div>
                    <div class="col">@Model.UserName</div>
                    <sl-divider></sl-divider>
                    <div class="col-auto">昵称</div>
                    <div class="col">@Model.Nickname</div>
                    <sl-divider></sl-divider>
                    <div class="col-auto">邮箱</div>
                    <div class="col">
                        <a class="me-2" href="mailto:@Model.UserMail">@Model.UserMail</a>
                        @if (Model.UserMailValid == 1)
                        {
                            <sl-badge variant="success">已验证</sl-badge>
                        }
                        else if (!string.IsNullOrWhiteSpace(Model.UserMail))
                        {
                            <sl-badge variant="neutral">未验证</sl-badge>
                            <sl-button href="/user/verify/send" variant="text" size="small">立即发送验证邮件</sl-button>
                        }
                    </div>
                    <sl-divider></sl-divider>
                    <div class="col-auto">手机</div>
                    <div class="col"><a href="tel:@Model.UserPhone">@Model.UserPhone</a></div>
                    <sl-divider></sl-divider>
                    <div class="col-auto">网址</div>
                    <div class="col">
                        @if (!string.IsNullOrWhiteSpace(Model.UserUrl))
                        {
                            <a href='@(Model.UserUrl.Contains("//")?Model.UserUrl:"http://"+Model.UserUrl)'>@Model.UserUrl</a>
                        }
                    </div>
                    <sl-divider></sl-divider>
                </div>
            </div>

            <sl-dialog class="nr-dialog-form" label="编辑个人信息">
                <form action="/User/SaveUserInfo" method="post">
                    <sl-input class="mb-3" size="small" type="text" required label="账号@(Model.UserNameChange == 1?" （不能修改）":" （你可以修改一次账号）")" name="UserName" value="@Model.UserName" maxlength="50" @(Model.UserNameChange == 1 ? "readonly" : "")>
                        <sl-icon name="person-circle" slot="prefix"></sl-icon>
                    </sl-input>
                    <sl-input class="mb-3" size="small" type="text" required label="昵称" name="Nickname" value="@Model.Nickname" maxlength="50">
                        <sl-icon name="person-circle" slot="prefix"></sl-icon>
                    </sl-input>
                    <sl-input class="mb-3" size="small" type="email" required label="邮箱 （更改邮箱需要重新验证）" name="UserMail" value="@Model.UserMail" maxlength="50">
                        <sl-icon name="envelope" slot="prefix"></sl-icon>
                    </sl-input>
                    <sl-input class="mb-3" size="small" type="tel" required label="手机" name="UserPhone" value="@Model.UserPhone" maxlength="20">
                        <sl-icon name="phone" slot="prefix"></sl-icon>
                    </sl-input>
                    <sl-input class="mb-3" size="small" type="text" label="网址" name="UserUrl" value="@Model.UserUrl" maxlength="100">
                        <sl-icon name="link-45deg" slot="prefix"></sl-icon>
                    </sl-input>

                    <sl-button class="nr-btn-save-info" type="submit" variant="warning">保存</sl-button>
                </form>
            </sl-dialog>

        </div>

        <div class="col-lg-4 mb-4 pe-lg-5">
            <h4>更改密码</h4>
            <sl-divider></sl-divider>
            <sl-input class="nr-txt-pwd1 mb-3" type="password" size="small" label="当前密码" maxlength="20" placeholder="******" toggle-password>
                <sl-icon name="key" slot="prefix"></sl-icon>
            </sl-input>
            <sl-input class="nr-txt-pwd2 mb-3" type="password" size="small" label="新的密码，至少 5 位数" maxlength="50" placeholder="******" toggle-password>
                <sl-icon name="key" slot="prefix"></sl-icon>
            </sl-input>
            <sl-input class="nr-txt-pwd3 mb-3" type="password" size="small" label="确认新的密码" maxlength="50" placeholder="******" toggle-password>
                <sl-icon name="key" slot="prefix"></sl-icon>
            </sl-input>
            <sl-button class="nr-btn-save-pwd mb-3" variant="warning" size="small">提交</sl-button>
        </div>

        <div class="col-lg-3 mb-4">
            <h4>授权关联</h4>
            <sl-divider></sl-divider>
            @foreach (var key in ThirdLoginService.OpenIdMap.Keys)
            {
                var loginType = key.ToString().ToLower();
                var loginIcon = CommonService.StaticResourceLink("LoginPath", $"{loginType}.svg");
                var field = ThirdLoginService.OpenIdMap[key];
                var isBind = !string.IsNullOrWhiteSpace(Model.GetType().GetProperty(field).GetValue(Model)?.ToString());

                <div class="mb-3">
                    <span class="me-2">
                        <img src="@loginIcon" style="height:1.3em" />&nbsp;@key
                    </span>
                    @if (isBind)
                    {
                        <sl-badge variant="success">已绑定</sl-badge>
                        <a href="/user/ridoauth/@loginType">解除</a>
                    }
                    else
                    {
                        <a href="/user/oauth/@loginType">绑定账号</a>
                    }
                </div>
            }
        </div>
    </div>
</div>

<script src="/js/user/setting.js" asp-append-version="true"></script>